<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue"
import { useTagsViewStore } from "@/store/modules/tags-view"
import { useSettingsStore } from "@/store/modules/settings"
import Hamburger from "./Hamburger/index.vue"
import { useDevice } from "@/hooks/useDevice"
import { useLayoutMode } from "@/hooks/useLayoutMode"
import { useAppStore } from "@/store/modules/app"
import emitter from "../../utils/eventBus"
const { isMobile } = useDevice()
const { isTop } = useLayoutMode()
const appStore = useAppStore()
const props = defineProps(["blackTheme"])
const tagsViewStore = useTagsViewStore()
const settingsStore = useSettingsStore()
const stickyElm = ref()
const scrollHandle = () => {
  if (!stickyElm.value) return
  const rect = stickyElm.value.getBoundingClientRect()
  stickyElm.value.classList.toggle("is-sticky", rect.top === 86)
}
/** 切换侧边栏 */
const toggleSidebar = () => {
  appStore.toggleSidebar(false)
}
const isList = ref(false)
const handleCustomEvent = (payload: { data: boolean }) => {
  isList.value = payload.data
}
onMounted(() => {
  stickyElm.value = document.querySelector("#tabsBoxID")
  emitter.on("custom-event", handleCustomEvent)
})
onUnmounted(() => {
  emitter.off("custom-event", handleCustomEvent)
})
</script>

<template>
  <section class="app-main" :class="props.blackTheme ? 'black-theme' : isList ? 'list-app-main' : ''">
    <div class="app-scrollbar" id="appScrollbarID" @scroll="scrollHandle">
      <!-- <Hamburger
        v-if="!isTop || isMobile"
        :is-active="appStore.sidebar.opened"
        class="hamburger"
        @toggle-click="toggleSidebar"
        :blackTheme="props.blackTheme"
      /> -->
      <!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->
      <router-view v-slot="{ Component, route }">
        <transition name="el-fade-in" mode="out-in">
          <keep-alive :include="tagsViewStore.cachedViews">
            <component :is="Component" :key="route.path" class="app-container-grow" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
    <!-- 返回顶部 -->
    <el-backtop />
    <!-- 返回顶部（固定 Header 情况下） -->
    <el-backtop target=".app-scrollbar" />
  </section>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.app-main {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  background: url("../../assets/layouts/bgc.png") no-repeat center center;
  background-size: cover;
  // background-image: linear-gradient(90deg, #f4f8ff, #d4e7ff, #f4f8ff);
  // background-image: linear-gradient(
  //   248deg,
  //   #cbdeff 13.6%,
  //   rgba(202, 223, 255, 0.3) 53.41%,
  //   rgba(184, 216, 255, 0.21) 99.46%
  // );
  &.black-theme {
    //background: #010227 url("@/assets/dashboard/screen_bg.png") no-repeat center/cover;
    .app-scrollbar {
      margin-top: -20px;
    }
  }
  .hamburger {
    position: absolute;
    left: 0;
    top: 50%;
  }
}
.list-app-main {
  background-image: linear-gradient(
    248deg,
    #cbdeff 13.6%,
    rgba(202, 223, 255, 0.3) 53.41%,
    rgba(184, 216, 255, 0.21) 99.46%
  );
}

.app-scrollbar {
  // padding: 0 20px 16px 20px;
  flex-grow: 1;
  overflow: hidden;
  @extend %scrollbar;
  display: flex;
  flex-direction: column;
  .app-container-grow {
    flex-grow: 1;
  }
}
</style>
